<template>
    <div id='' class='my_zdy'>
        <Button v-for="(item,index) in tagList" :key="index" :type="`${active==item.value?'primary':'default'}`" :size='item.size' checkable @click="onClick(item)" style="margin-left:10px">
            <Badge :color="item.color" /><span :style="{color:`${active==item.value?'#fff':'black'}`}">{{item.label}}</span>
        </Button>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: '',
    props: ['event'],
    data() {
        return {
            tagList: [
                { label: '全部', size: 'default', color: 'green', value: '0' },
                { label: '已提交', size: 'default', color: 'magenta', value: '1' },
                { label: '未提交', size: 'default', color: 'gold', value: '2' },
            ]
        };
    },
    components: {},
    computed: {
        ...mapState('other/tagBadge', ['active'])
    },
    beforeMount() { },
    mounted() {
        this.$emit('setSearchInfo', [{ key: 'name', value: '0' }])
        this.changeValue({ key: 'active', value: '0' })
    },
    methods: {
        ...mapActions('other/tagBadge', ['changeValue']),
        reset() {
            this.$emit('setSearchInfo', [{ key: 'name', value: '0' }])
            this.changeValue({ key: 'active', value: '0' })
        },
        search(value) {
            this.$emit('setSearchInfo', [{ key: 'name', value: value }])
            this.$emit('handleRefresh')
        },
        onClick(_data) {
            this.search(_data.value)
            this.changeValue({ key: 'active', value: _data.value })
        }
    },
    watch: {}
}
</script>
<style>
.my_zdy {
    position: absolute;
    display: flex;
    left: 0;
    top: 10px;
}
.my_zdy .ivu-badge-status-dot {
    width: 10px !important;
    height: 10px !important;
}
</style>